<!-- 全域节能 -->


<template>
    <div>
        <div class="main">
            <div class="content">
                <div class="treeContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
                    <el-input placeholder="输入关键字搜索" v-model="input3" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>

                    <div class="treeMain">
                        <el-tree
                            @node-click="nodeClick"
                            :data="data"
                            node-key="id"
                            :default-expanded-keys="[1, 4, 9, 99]"
                            :props="defaultProps"
                            :highlight-current="true"
                            :expand-on-click-node="false"
                            :current-node-key="currentNodeId"
                        >
                            <span slot-scope="{node}" class="custom-tree-node" :title="node.label" v-text="node.label"> </span>
                        </el-tree>
                    </div>
                </div>

                <div class="rightContent" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
                    <div class="listCount">
                        <div class="listCountLeft">
                            <div class="leftItem cursor" @click="countClick(1)">
                                <iconBorder
                                    outWidth="50px"
                                    inWidth="25px"
                                    bgColor="#D8E6FC"
                                    imgSrc="newIndex/device.png"
                                    marginTop="12px"
                                ></iconBorder>
                                <div>
                                    <label>设备总数</label>
                                    <span>
                                        <b>400</b>
                                        台
                                    </span>
                                </div>
                            </div>
                            <div class="leftItem cursor" @click="countClick(2)">
                                <iconBorder
                                    outWidth="50px"
                                    inWidth="25px"
                                    bgColor="#D8E6FC"
                                    imgSrc="newIndex/12.png"
                                    marginTop="12px"
                                ></iconBorder>
                                <div>
                                    <label>空调控制器</label>
                                    <span>
                                        <b>200</b>
                                        台
                                    </span>
                                </div>
                            </div>
                            <div class="leftItem cursor" @click="countClick(3)">
                                <iconBorder
                                    outWidth="50px"
                                    inWidth="25px"
                                    bgColor="#D8E6FC"
                                    imgSrc="newIndex/ludeng.png"
                                    marginTop="12px"
                                ></iconBorder>
                                <div>
                                    <label>路灯控制器</label>
                                    <span>
                                        <b>100</b>
                                        台
                                    </span>
                                </div>
                            </div>
                            <div class="leftItem cursor" @click="countClick(4)">
                                <zhaoming></zhaoming>
                                <div>
                                    <label>照明插座控制器</label>
                                    <span>
                                        <b>100</b>
                                        台
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="listCountRight">
                            <div class="rightItem cursor" @click="countAllClick('总在线')">
                                <div class="itemTop">
                                    <!-- <label class="green"></label> -->
                                    总告警
                                </div>
                                <div class="itemBottom">
                                    <span>
                                        <b>350</b>
                                        台
                                    </span>
                                </div>
                            </div>
                            <div class="rightItem cursor" @click="countAllClick('总离线')">
                                <div class="itemTop">
                                    <iconBorder
                                        outWidth="16px"
                                        inWidth="10px"
                                        bgColor="#EDD46F"
                                        imgSrc="newIndex/warn.png"
                                        :isCenter="false"
                                    ></iconBorder>
                                    一般告警
                                </div>
                                <div class="itemBottom">
                                    <span>
                                        <b>40</b>
                                        台
                                    </span>
                                </div>
                            </div>
                            <div class="rightItem cursor" @click="countAllClick('总告警')">
                                <div class="itemTop">
                                    <iconBorder
                                        outWidth="16px"
                                        inWidth="10px"
                                        bgColor="#E99E53"
                                        imgSrc="newIndex/warn.png"
                                        :isCenter="false"
                                    ></iconBorder>
                                    紧急告警
                                </div>
                                <div class="itemBottom">
                                    <span>
                                        <b>10</b>
                                        台
                                    </span>
                                </div>
                            </div>
                            <div class="rightItem cursor" @click="countAllClick('总欠费')">
                                <div class="itemTop">
                                    <iconBorder
                                        outWidth="16px"
                                        inWidth="10px"
                                        bgColor="#C83523"
                                        imgSrc="newIndex/warn.png"
                                        :isCenter="false"
                                    ></iconBorder>
                                    重要告警
                                </div>
                                <div class="itemBottom">
                                    <span>
                                        <b>30</b>
                                        台
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="listLine"></div>
                    </div>
                    <div class="rightAll">
                        <div class="selectValue">
                            <label class="value"> {{ currentNodeName }} </label>
                            <div class="rightValue">
                                <span> 总告警数：<b>200台</b> </span>
                                <span class="cursor" @click="currentClick('一般告警数')">
                                    <img src="@/assets/images/warnCenter/oneWarn.png" />
                                    一般告警数：<b>150台</b>
                                </span>
                                <span class="cursor" @click="currentClick('紧急告警数')">
                                    <img src="@/assets/images/warnCenter/twoWarn.png" />
                                    紧急告警数：<b>40台</b>
                                </span>
                                <span class="cursor" @click="currentClick('重要告警数')">
                                    <img src="@/assets/images/warnCenter/threeWarn.png" />
                                    重要告警数：<b>5台</b>
                                </span>
                            </div>
                        </div>
                        <div class="oneWarn warnItem">
                            <span class="cursor">
                                <img src="@/assets/images/warnCenter/oneWarn.png" />
                                一般告警数<b>150台</b>
                            </span>
                            <div class="div">
                                <div class="hover">过压：5台</div>
                                <div>欠压：3台</div>
                                <div>零能耗：0台</div>
                                <div>非正常开启：5台</div>
                                <div>漏电：2台</div>
                                <div>过载跳电：2台</div>

                                <label @click="showList('one')"
                                    ><span class="span">{{ showOne ? '收起' : '展开' }} </span>
                                    <i class="el-icon" :class="showOne ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i
                                ></label>
                            </div>
                        </div>
                        <div class="gjw-list" v-if="showOne">
                            <div v-if="listOne.length == 0" class="noData">暂无数据</div>
                            <div v-else>
                                <div class="gjw-list-list">
                                    <div class="gjw-list-item">
                                        <deviceItem
                                            v-for="(item, index) in listOne"
                                            v-bind:key="index"
                                            @click.native.stop="gotoDetail(item)"
                                            :item="item"
                                            class="item"
                                        ></deviceItem>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="twoWarn warnItem">
                            <span class="cursor">
                                <img src="@/assets/images/warnCenter/twoWarn.png" />
                                紧急告警数<b>40台</b>
                            </span>
                            <div class="div">
                                <div class="hover">设备离线：10台</div>
                                <div>电压异常：5台</div>
                                <div>网关离线：12台</div>
                                <div>过载用电：0台</div>
                                <div>数据突变：10台</div>
                                <div>异常扣费：5台</div>
                                <div>长时间未缴费：5台</div>
                                <div>程序异常：5台</div>
                                <div>实时采集不在线：0台</div>
                                <label @click="showList('two')"
                                    ><span class="span">{{ showTwo ? '收起' : '展开' }} </span>
                                    <i class="el-icon" :class="showTwo ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i
                                ></label>
                            </div>
                        </div>
                        <div class="gjw-list" v-if="showTwo">
                            <div v-if="listTwo.length == 0" class="noData">暂无数据</div>
                            <div v-else>
                                <div class="gjw-list-list">
                                    <div class="gjw-list-item">
                                        <deviceItem
                                            v-for="(item, index) in listTwo"
                                            v-bind:key="index"
                                            @click.native.stop="gotoDetail(item)"
                                            :item="item"
                                            class="item"
                                        ></deviceItem>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="threeWarn warnItem">
                            <span class="cursor">
                                <img src="@/assets/images/warnCenter/threeWarn.png" />
                                重要告警数<b>10台</b>
                            </span>
                            <div class="div">
                                <div class="hover">从未采集：1台</div>
                                <div>存储过程执行异常：0台</div>
                                <div>设备长时间未计算：5台</div>
                                <div>账户长时间未计算：0台</div>
                                <label @click="showList('three')"
                                    ><span class="span">{{ showThree ? '收起' : '展开' }} </span>
                                    <i class="el-icon" :class="showThree ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i
                                ></label>
                            </div>
                        </div>
                        <div class="gjw-list" v-if="showThree">
                            <div v-if="listThree.length == 0" class="noData">暂无数据</div>
                            <div v-else>
                                <div class="gjw-list-list">
                                    <div class="gjw-list-item">
                                        <deviceItem
                                            v-for="(item, index) in listThree"
                                            v-bind:key="index"
                                            @click.native.stop="gotoDetail(item)"
                                            :item="item"
                                            class="item"
                                        ></deviceItem>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <arrowLeft @arrowChange="arrowChange"></arrowLeft>
        </div>
    </div>
</template>

<script>
import Dbzs from '@/assets/images/monitor/dbzs.png'
import Sbzs from '@/assets/images/monitor/sbzs.png'
import Sbzs1 from '@/assets/images/monitor/sbzs1.png'
import Wgzs from '@/assets/images/monitor/wgzs.png'
import arrowLeft from '@/components/customComponents/arrowLeft'
import deviceItem from '@/components/newIndex/deviceItem'
import iconBorder from '@/components/newIndex/iconBorder'
import {PopupCommon} from '@/libs/popupCommon'
import {Utility} from '@/libs/utility.js'
import {LeftTree, listData} from '@/mockData/monitorCenter.js'
import zhaoming from '@/components/newIndex/zhaoming.vue'
import 'splitpanes/dist/splitpanes.css'
export default {
    name: 'moneyIndex',
    components: {
        arrowLeft,
        iconBorder,
        deviceItem,
        zhaoming
    },
    data() {
        return {
            currentNodeId: 1,
            currentNodeName: '吉首大学张家界学院',
            listTreeData: [],
            input3: '',
            dir: 'left',
            showOne: true,
            showTwo: true,
            showThree: true,
            listOne: listData.filter((t) => t.id < 8),
            listTwo: listData.filter((t) => t.id >= 8 && t.id < 16),
            listThree: listData.filter((t) => t.id >= 16 && t.id < 24),
            DbzsImg: Dbzs,
            SbzsImg: Sbzs,
            Sbzs1Img: Sbzs1,
            WgzsImg: Wgzs,
            data: LeftTree,
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            const list = Utility.arrayFlat(LeftTree, (t) => t.children)
            this.listTreeData = list
            console.log(this.listTreeData, 'this.listTreeData ...')
            this.roomList = list.filter((t) => t.id == '999')
        })
    },
    destroyed() {},
    methods: {
        nodeClick(node) {
            this.isHasFloor = node.type == 'room'
            this.currentNodeId = node.id
            // 显示两级
            var item = this.listTreeData.find((t) => t.id == node.parentId)
            if (item) {
                this.currentNodeName = item.label + '   -   ' + node.label
            } else {
                this.currentNodeName = node.label
            }
            if (node.type == 'room') {
                this.currentNodeName = node.label
            }
        },
        arrowChange(e) {
            this.dir = e
        },
        showList(type) {
            if (type == 'one') {
                this.showOne = !this.showOne
            }
            if (type == 'two') {
                this.showTwo = !this.showTwo
            }
            if (type == 'three') {
                this.showThree = !this.showThree
            }
        },
        /** 查看详情 */
        gotoDetail(item) {
            if (item.type == 1) {
                console.log(item)
            }
        },
        back(e) {
            console.log(e, 'back.................')
        },
        /** 网关点击*/
        gatewayClick() {
            // this.currentPage = "gateway"
        },
        /** 选中的左侧树节点后，点击在线设备等 */
        currentClick(type) {
            PopupCommon.notify('info', type + '可点击...')
        },
        /** 总设备在线等点击*/
        countAllClick(type) {
            PopupCommon.notify('info', type + '可点击...')
        },
        /** 水表2 电表1 点击 */
        countClick(type) {
            if (type == 1) {
                this.listOne = listData.filter((t) => t.id < 8)
                this.listTwo = listData.filter((t) => t.id >= 8 && t.id < 16)
                this.listThree = listData.filter((t) => t.id >= 16 && t.id < 24)
            } else {
                this.listOne = listData.filter((t) => t.id < 8).filter((t) => t.type == type - 1)
                this.listTwo = listData.filter((t) => t.id >= 8 && t.id < 16).filter((t) => t.type == type - 1)
                this.listThree = listData.filter((t) => t.id >= 16 && t.id < 24).filter((t) => t.type == type - 1)
            }
        },
        getImg(type) {
            return type == 1 ? require('@/assets/images/monitor/db.png') : require('@/assets/images/monitor/sb.png')
        },
        getHeaderClass(level) {
            return level == 1 ? 'normal' : level == 2 ? 'lx' : 'gj'
        },
        getBottomClass(type, level) {
            if (type == 1 && level == 1) {
                return 'dbzc'
            } else if (type == 2 && level == 1) {
                return 'sbzc'
            } else {
                return 'yc'
            }
        },
        getLevelImg(level) {
            return level == 1
                ? require('@/assets/images/monitor/warn1.png')
                : level == 2
                ? require('@/assets/images/monitor/warn2.png')
                : require('@/assets/images/monitor/warn3.png')
        },
        showDetail(item) {
            console.log(item)
        },
        // 分页点击事件
        pageChange(p) {
            // this.current = p
            // this.initPage()
            console.log(p)
        },
        // 页码点击事件,p当前页
        handleSizeChange(e) {
            this.size = e
            this.current = 1
            // this.initPage()
        }
    }
}
</script>

<style scoped lang="scss">
.main {
    background-color: #fff;
    height: calc(100vh - 100px);
    margin: 10px 0;
    position: relative;
}
.left {
    left: 230px !important;
}
.main .content {
    padding: 10px 0 0 10px;
    background-color: #fff;
    display: flex;
}
.treeContent {
    padding-right: 10px;
    height: calc(100vh - 125px);
    border-right: 1px solid #eee;
}
.leftArrow {
    width: 250px !important;
}

.rightArrow {
    width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

.leftTable {
    max-width: calc(100% - 260px);
}

.rightTable {
    max-width: calc(100% - 0px);
}

.treeMain {
    height: calc(100vh - 175px);
    overflow-y: auto;
    margin-top: 10px;
    font-size: 14px;
}
.rightContent {
    background-color: #fff;
    height: calc(100vh - 100px);
    margin-left: 10px;
    margin-right: 10px;
    flex: 1;
}
.rightAll {
    height: calc(100vh - 230px);
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 15px;

    background-color: #fff;
    flex: 1;
    text-align: left;

    &::-webkit-scrollbar {
        width: 8px; // 滚动条宽度
        display: none;
    }
}
.listCount {
    height: 90px;
    border: 1px solid #eeeef0;
    position: relative;
    background-color: #f5f9fc;
    border-radius: 4px;
}

.listCountLeft {
    width: 67%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.listCountRight {
    width: 33%;
    float: left;
}

.listLine {
    width: 2px;
    height: 45px;
    background-color: #eeeef0;
    position: absolute;
    top: 22px;
    left: 67.5%;
}
.leftItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 20px;
    cursor: pointer;
}

.leftItem img {
    width: 50px;
    cursor: pointer;
}
.leftItem div {
    display: inline-block;
    margin-left: 10px;
    line-height: 30px;
    text-align: left;
    cursor: pointer;
}

.leftItem div label {
    font-size: 14px;
    display: block;
    cursor: pointer;
}

.leftItem div span {
    font-size: 14px;
    color: #757e8b;
    cursor: pointer;
}

.leftItem div span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
    cursor: pointer;
}
.rightItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 22px;
}
.rightItem .itemTop {
    font-size: 14px;
    line-height: 27px;
}
.rightItem .itemTop img {
    width: 15px;
    display: inline-block;
    height: 15px;
    margin-right: 10px;
}
.rightItem .itemTop label {
    font-size: 12px;
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 8px;
    margin-right: 10px;
}
.green {
    background-color: #01b77a;
}
.gray {
    background-color: #707070;
}
.red {
    background-color: #e60000;
}
.orange {
    background-color: #ff9900;
}
.rightItem .itemBottom {
    margin-top: 3px;
}
.rightItem .itemBottom span {
    font-size: 14px;
    color: #757e8b;
}
.rightItem .itemBottom span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.selectValue {
    display: flex;
    height: 50px;
    background: #f7f8fc;
    border-radius: 4px;
    line-height: 50px;
}
.selectValue .value {
    padding-left: 20px;
}
.oneWarn {
    background: url('@/assets/images/warnCenter/oneWarnBg.png') no-repeat left top;
    color: #bb9d36;
}
.twoWarn {
    background: url('@/assets/images/warnCenter/twoWarnBg.png') no-repeat left top;
    color: #c86c35;
}
.threeWarn {
    background: url('@/assets/images/warnCenter/threeWarnBg.png') no-repeat left top;
    color: #cf5757;
}
.warnItem {
    width: 100%;
    height: 52px;
    line-height: 52px;
    margin-top: 10px;
    border-bottom-left-radius: 4px;
    padding-left: 20px;
    display: flex;
}

.warnItem .div {
    flex: 1;
    text-align: right;
}
.warnItem .div div {
    display: inline-block;
    border: 1px solid #eee;
    height: 25px;
    line-height: 25px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 10px;
    color: #333;
    font-size: 13px;
    cursor: pointer;
}
.warnItem .div div:hover {
    border-color: #3186fb;
    color: #3186fb;
}
.warnItem .div div.hover {
    border-color: #3186fb;
    color: #3186fb;
}
.warnItem .div .span {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.warnItem .div i {
    width: 15px;
    color: #666;
    margin-right: 30px;
    cursor: pointer;
}
.warnItem span {
    font-size: 16px;
}
.warnItem span b {
    font-size: 16px;
}
.warnItem span img {
    width: 15px;
    display: inline-block;
    height: 15px;
    margin-right: 5px;
}

.warnItem .value {
    margin-left: 20px;
    font-size: 16px;
}

.selectValue .rightValue {
    flex: 1;
    text-align: right;
    margin-right: 20px;
}
.selectValue .rightValue span {
    font-size: 16px;
    color: #666;
}
.selectValue .rightValue span b {
    font-size: 16px;
    color: #333;
}
.selectValue .rightValue span label {
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 10px;
    margin-left: 40px;
    margin-right: 5px;
}
.selectValue .rightValue span img {
    width: 15px;
    display: inline-block;
    height: 15px;
    margin-left: 40px;
    margin-right: 5px;
}
.gjw-list {
    background: #fff;
    margin-top: 10px;
}
.gjw-list .gjw-list-list {
    overflow-y: auto;
    padding-top: 0px;
    margin-bottom: 10px;
    &::-webkit-scrollbar {
        width: 8px; // 滚动条宽度
        display: none;
    }
}
.gjw-list .gjw-list-list .gjw-list-item {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
}
.gjw-list .gjw-list-list .gjw-list-item .item {
    width: calc((100% - 50px) / 6);
    height: 263px;
    border-radius: 4px;
    background: #fff;
    position: relative;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    background-color: #55cca4;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    overflow: hidden;
}
.gjw-list .gjw-list-list .gjw-list-item .item .db {
    background-color: #55cca4;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sb {
    background-color: #6caae5;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header img {
    float: left;
    margin: 10px 6px 0 10px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header label {
    font-size: 14px;
    float: left;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList {
    float: right;
    height: 35px;
    text-align: right;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .warn {
    float: right;
    margin-right: -10px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .level {
    font-size: 12px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .qf {
    float: right;
    width: 10px;
    margin-right: 24px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .status {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 8px;
    float: right;
    margin-right: 10px;
    margin-top: 14px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .normal {
    background-color: #00ffa9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .lx {
    background-color: #77dbb9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .gj {
    background-color: #00ffa9;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom {
    background-color: #e2f7f0;
    height: 65px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .dbzc {
    background-color: #e2f7f0 !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sbzc {
    background-color: #e9f6fe !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .yc {
    background-color: #f4f4f4 !important;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue {
    font-size: 14px;
    color: #666;
    padding-top: 13px;
    padding-bottom: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue {
    font-size: 14px;
    color: #666;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-page {
    height: 40px;
    padding-top: 10px;
    text-align: right;
}
.cursor {
    cursor: pointer;
}
</style>
